<template>
  <div class="welcome">
    <brand :items="[{ name: '管理首页', toName: 'welcome' }]"></brand>
    <div class="wrap">
      <div class="wrap-header">
        <div class="header-left border-background">
          <el-calendar
            class="header-left-calender border-background"
            v-model="calender"
          ></el-calendar>
        </div>
        <div class="header-right">
          <div class="header-right-top">
            <div class="header-right-top-left">
              <div class="header-right-top-left-top border-background">
                <h2>早上好, {{ $store.state.roleName }}</h2>
                <p>您有 <i>3</i> 条待办消息!</p>
              </div>
              <div class="header-right-top-left-bottom border-background">
                <div class="weather-left">
                  <div class="weather-up">
                    <h2>{{ weather.country }} {{ weather.city }}</h2>
                  </div>
                  <div class="weather-down">
                    {{ weather.wea }} {{ weather.tem1 }}~{{ weather.tem2 }}
                  </div>
                </div>
                <div class="weather-right el-icon-heavy-rain"></div>
              </div>
            </div>
            <div class="header-right-top-right border-background">
              <h2>通知公告</h2>
              <ul>
                <li>
                  与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
                </li>
                <li>
                  与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
                </li>
                <li>
                  与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
                </li>
                <li>
                  与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
                </li>
              </ul>
            </div>
          </div>
          <div class="header-right-bottom border-background">
            <div class="header-chart-left">
              <task @resize="injectCom"></task>
            </div>
            <div class="header-chart-right">
              <div class="header-chart-right-title">本月工作完成具体情况</div>
              <div class="header-chart-right-exhibit">
                <div>
                  <span class="queta"> 18 </span>
                  <span class="base" style="background-color: #2db5a1"
                    >进行中</span
                  >
                </div>
                <div>
                  <span class="queta"> 12 </span>
                  <span class="base" style="background-color: #ea430c"
                    >未完成</span
                  >
                </div>
                <div>
                  <span class="queta"> 5 </span>
                  <span class="base" style="background-color: #f97d1c"
                    >已完成</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrap-footer border-background">
        <div class="footer-left">
          <stage @resize="injectCom"></stage>
        </div>
        <div class="footer-right">
          <expect @resize="injectCom"></expect>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import brand from "components/Brand";
import Stage from "./Stage";
import Task from "./Task";
import Expect from "./Expect";
import { getWeather } from "api/interface";
export default {
  components: {
    brand,
    Stage,
    Task,
    Expect,
  },
  data() {
    return {
      calender: new Date(),
      echartResizes: [],
      weather: {},
    };
  },
  methods: {
    injectCom(echart) {
      this.echartResizes.push(echart);
    },
  },
  mounted() {
    getWeather().then(({ data }) => {
      this.weather = data?.data[0] || {};
    });

    this.$nextTick(function () {
      let timer;
      window.onresize = () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          this.echartResizes.forEach((echart) => {
            echart.resize();
          });
        }, 200);
      };
    });
  },
};
</script>

<style scoped>
h2 {
  font-size: 22px;
  font-weight: 500;
}
.welcome {
  height: 100%;
}
.border-background {
  background-color: #fff;
  border-radius: 15px;
}
i {
  color: rgb(236, 133, 115);
  font-style: normal;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 97%;
  margin-top: 15px;
  padding: 10px;
  background-color: #eee;
  border-radius: 15px;
  overflow: auto;
}
.wrap-header {
  margin-bottom: 10px;
  flex: 7;
  display: flex;
}
.header-left {
  flex: 3;
  margin-right: 10px;
}

>>> .el-calendar-table .el-calendar-day {
  height: 65px;
}
.header-right {
  flex: 7;
  display: flex;
  flex-direction: column;
}
.header-right-top {
  flex: 5;
  display: flex;
  margin-bottom: 10px;
}
.header-right-bottom {
  flex: 6;
  display: flex;
}
.header-chart-left {
  flex: 5;
}

.header-chart-right {
  flex: 5;
}
.header-chart-right-title {
  font-size: 18px;
  line-height: 80px;
  font-weight: 550;
  padding-top: 15px;
}
.header-chart-right-exhibit {
  height: calc(100% - 80px);
  display: flex;
  justify-content: center;
}
.header-chart-right-exhibit div {
  height: 109px;
  width: 70px;
  display: flex;
  flex-direction: column;
  margin: 0 10px;
}
.header-chart-right-exhibit div .queta {
  flex: 7;
  border-radius: 4px;
  background-color: rgba(27, 27, 27, 0.8);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 23px;
  margin-bottom: 3px;
}
.header-chart-right-exhibit div .base {
  flex: 3;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 17px;
}
.header-right-top-left {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.header-right-top-left-top {
  flex: 5;
  margin-bottom: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header-right-top-left-top p {
  line-height: 40px;
  padding-left: 30px;
}
.header-right-top-left-top h2 {
  line-height: 40px;
  padding-left: 30px;
}
.header-right-top-left-top h2 {
  font-weight: 600;
  font-size: 20px;
}
.header-right-top-left-bottom {
  flex: 6;
  display: flex;
}
.weather-left {
  flex: 7;
  display: flex;
  flex-direction: column;
  padding: 15px 0;
}
.weather-right {
  flex: 4;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather-up {
  flex: 5;
  display: flex;
  align-items: center;
  padding-left: 10px;
  justify-content: center;
}
.weather-down {
  flex: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-right-top-right {
  flex: 7;
  margin-left: 10px;
}
.header-right-top-right h2 {
  margin: 20px 0;
}
.header-right-top-right li {
  margin-bottom: 5px;
}
.wrap-footer {
  flex: 3;
  display: flex;
  min-height: 200px;
}
.footer-left {
  flex: 6;
}

.footer-right {
  flex: 4;
}
</style>
